<template>
  <!-- <div>playlist {{ $route.query }}</div> -->
  <div class="play-list" v-if="detail">
    <div class="back" @click="$router.back()">==</div>
    <header>
      <div
        class="mask"
        :style="{
          backgroundImage: `url('${detail.coverImgUrl}?imageView=1&type=webp&thumbnail=247x0')`,
        }"
      ></div>
      <div class="thumb">
        <img :src="detail.coverImgUrl | completeImageUrl" alt="" />
        <span>{{ detail.playCount | parsePlayCount }}</span>
      </div>
      <div class="right">
        <h3>{{ detail.name }}</h3>
        <div class="creator">
          <img :src="detail.creator.avatarUrl" alt="" />
          <span>{{ detail.creator.nickname }}</span>
        </div>
      </div>
    </header>

    <button @click="$emit('update:currentPLayList', detail.tracks)">
      播放所有
    </button>
    <section class="list">
      <SongListItem
        v-for="(item, index) in detail.tracks"
        :key="item.id"
        :item="item"
        :order="index + 1"
        @click.native="$emit('update:currentSong', item)"
        :currentSong="currentSong"
        :playing="playing"
      />
    </section>
  </div>
</template>

<script>
import SongListItem from "@/components/SongListItem.vue";
export default {
  props: {
    currentSong: [Object, null],
    playing: Boolean,
  },
  components: {
    SongListItem,
  },
  data: function () {
    return {
      detail: null,
    };
  },
  //   初次创建  路由参数更新的时候不会再次触发
  created: function () {
    this.getPlayListDetail(this.$route.query.id);
  },
  //   监听 路由参数的变化
  beforeRouteUpdate: function (to, from, next) {
    this.getPlayListDetail(to.query.id);
    next();
  },
  methods: {
    getPlayListDetail: function (id) {
      this.axios
        .get("https://apis.netstart.cn/music/playlist/detail", {
          params: { id },
        })
        .then((res) => {
          console.log(res, this);
          this.detail = res.data.playlist;
        });
    },
  },
};
</script>
<style lang="less">
.play-list {
  header {
    display: flex;
    padding: 25px;
    position: relative;
    overflow: hidden;
    .mask {
      background-color: rgb(59, 59, 59);
      background-position: center center;
      background-size: cover;
      filter: blur(50px) brightness(0.6);

      transform: scale(1.5);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .thumb {
      position: relative;
      background: red;
      width: 126px;
      height: 126px;
      img {
        vertical-align: middle;
      }
      span {
        position: absolute;
        top: 5px;
        right: 5px;
        color: white;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
      }
    }

    .right {
      flex: 1;
      h3 {
      }
      .creator {
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        span {
        }
      }
    }
  }
}
</style>